<template>
  <div @dblclick="clear" class="popupPanel">
    <van-popup
      v-model="showPanel"
      :overlay="false"
      click.sync="clickup"
      close-icon="close"
      position="bottom"
      :style="{ height: '30%' }"
      ><div @click="clickup" class="panelContent">
        <ul>
          <li class="itemli" v-for="el in list">
            <dl class="musicline">
              <dt class="itemdt"><img src="../../assets/music.png" /></dt>
              <dt class="itemdt" style="width:200px">{{ el.name }}</dt>
              <dt class="itemdt"><img src="../../assets/loading.gif" /></dt>
            </dl>
          </li>
        </ul></div
    ></van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import eventBus from '../../server/eventBus';
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  private list: any = [];
  private showPanel: any = false;
  public debug(data: object) {
    this.list.push(data);
  }

  public mounted() {
    eventBus.$on('uploadFile', this.uploadFile);
  }

  private clear() {
    this.list = [];
  }

  private uploadFile(msg: any) {
    this.list.push(msg);
    this.showPanel = true;
  }

  private clickup() {
    this.showPanel = false;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.popupPanel {
  width: 100%;
  position: absolute;
  background: #424242;
  color: #fff;
  overflow: scroll;
  bottom: 0px;
  .panelContent {
    color: #ccc;
    position: absolute;
    width: 100%;
    height: 100%;
    .itemli {
      height: 50px;
      line-height: 50px;

      .musicline {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        text-align: center;

        .itemdt {
          img {
            width: 30px;
            margin-top: 10px;
            position: absolute;
          }
        }
      }
    }
  }
}
</style>
